<template>
  <div class="base">
    <div class="a">
      <div class="app1">
        <div class="logo-container">
          <img src="@/assets/zhiyuan.png" alt="登录页面Logo" class="login-logo" />
        </div>
        <div class="form-wrapper">
          <div class="a1">
            <div
              :class="['a1-item', { active: currentTab === 'personal' }]"
              @click="currentTab = 'personal'"
            >
              个人登录
            </div>
            <div
              :class="['a1-item', { active: currentTab === 'enterprise' }]"
              @click="currentTab = 'enterprise'"
            >
              队伍负责人登录
            </div>
          </div>
        </div>
        <div class="form-content">
          <div class="input-group">
            <div class="icon1">
              <img class="icon1" mode="widthFix" src="@/assets/youxiang1.png" alt="" />
            </div>
            <input
              type="email"
              class="login-input"
              placeholder="请输入邮箱"
              v-model="formData.email"
            />
          </div>

          <div class="input-group">
            <div class="icon1 icon">
              <img class="icon1" src="@/assets/mima1.png" alt="" />
            </div>
            <input
              :type="isPwdVisible"
              class="login-input"
              placeholder="请输入密码"
              v-model="formData.pwd"
            />
            <img
              :src="
                isPwdVisible === 'password'
                  ? require('@/assets/biyan.png')
                  : require('@/assets/zhengyan.png')
              "
              alt="切换密码可见性"
              class="toggle-pwd-icon"
              @click="togglePwdVisible"
            />
          </div>
          <div
            v-if="errorMsg"
            class="error-message"
            style="color: red; margin: 10px 0; text-align: center"
          >
            {{ errorMsg }}
          </div>
          <div class="agree-row">
            <input
              type="checkbox"
              id="agree"
              class="agree-check"
              v-model="formData.agree"
            />
            <label for="agree" class="agree-text"> 阅读并同意 </label>
            <a href="#" class="agree">《用户协议》</a>
            和
            <a href="#" class="agree">《隐私政策》</a>
          </div>
          <div class="but">
            <button @click="LoginView" class="btn">登录</button>
          </div>
          <div class="link-row">
            <a href="#" @click="LoginView1" class="link-item">个人用户注册</a>
            <a href="#" @click="LoginView2" class="link-item">忘记密码？</a>
          </div>
          <div class="link-row">
            <a href="#" class="link-item">一键登录</a>
            <a href="#" class="link-item">指纹登录</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import { ref, reactive ,getCurrentInstance  } from "vue";
import axios from "axios";

import { useRouter } from "vue-router";
const router = useRouter();
const currentTab = ref("personal");
const isPwdVisible = ref("password");
const { proxy } = getCurrentInstance(); // 获取当前实例
const formData = reactive({
  email: "",
  pwd: "",
  agree: false,
});
const errorMsg = ref("");

const togglePwdVisible = () => {
  if (isPwdVisible.value == "password") {
    isPwdVisible.value = "text";
  } else {
    isPwdVisible.value = "password";
  }
};

const validateForm = () => {
  errorMsg.value = "";
  if (!formData.email) {
    errorMsg.value = "请输入邮箱";
    return false;
  }
  const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailReg.test(formData.email)) {
    errorMsg.value = "请输入正确的邮箱格式";
    return false;
  }
  if (!formData.pwd) {
    errorMsg.value = "请输入密码";
    return false;
  }
  if (formData.pwd.length < 6) {
    errorMsg.value = "密码长度不能少于6位";
    return false;
  }

  if (!formData.agree) {
    errorMsg.value = "请阅读并同意用户协议和隐私政策";
    return false;
  }

  return true;
};

const LoginView = async () => {
  if (!validateForm()) return;

  try {
    const response = await axios.post(
      "http://localhost:9000/api/login",
      {
        email: formData.email,
        pwd: formData.pwd,
      },
      {
        headers: {
          "Content-Type": "application/json",
        },
      }
    );
    console.log("response", response.status);

    if (!response.data.errorMsg) {
      sessionStorage.setItem("user", JSON.stringify(response.data.user));
      proxy.$message({
        message: "登录成功",
        type: "success",
      });
      router.push("/HomePage");
    } else {
      errorMsg.value = response.data.message || "登录失败，请重试";
    }
  } catch (error) {
    console.error("完整错误信息：", error);
    if (error.request) {
      errorMsg.value = "后端未响应，请检查后端是否启动或地址是否正确";
    } else if (error.message.includes("Network Error")) {
      errorMsg.value = "跨域或网络错误，请检查后端CORS配置";
    } else {
      errorMsg.value = "请求失败：" + error.message;
    }
  }
};
const LoginView1 = () => {
  router.push("/ZhuceView");
};
const LoginView2 = () => {
  router.push("/WangjiView");
};
</script>

<style scoped>
.logo-container {
  text-align: center;
  margin-bottom: 20px;
}
.login-logo {
  width: 180px;
  height: auto;
  border-radius: 100px;
}
.a1 {
  display: flex;
}
.a1-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  color: white;
  cursor: pointer;
}
.a1-item.active {
  color: rgb(6, 149, 245);
  border-bottom: 2px solid rgb(10, 187, 251);
}
.base {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-image: url('@/assets/feige.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.a {
  width: 100%;
  display: flex;
  justify-content: center;
}

.app1 {
  display: flex;
  flex-direction: column;
  width: 380px;
  margin: 0 auto;
  padding: 40px;
  background: linear-gradient(145deg, rgba(245, 252, 255, 0.94), rgba(0, 138, 197, 0.6));
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 138, 197, 0.3), 0 5px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  transition: transform 0.3s, box-shadow 0.3s;
}

.app1:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 138, 197, 0.4), 0 8px 25px rgba(0, 0, 0, 0.15);
}

.a2 {
  font-size: 28px;
  font-weight: 700;
  color: white;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.input-group {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 16px;
  overflow: hidden;
}
.icon1 {
  width: 18px;
  height: 25px;
  color: rgba(239, 242, 247, 0.92);
  -webkit-user-select: none;
}
.icon2 {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input-icon {
  width: 20px;
  height: 20px;
}
.login-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px;
}

.toggle-pwd-icon {
  width: 18px;
  height: 22px;
  margin-right: 0px;
  cursor: pointer;
}
.agree-row {
  margin-top: 20px;
}
.agree {
  text-decoration: none;
}
.btn {
  margin-top: 20px;
  width: 100%;
  padding: 16px 0;
  border: none;
  border-radius: 20px;
  background: white;
  color: #008abc;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s;
  cursor: pointer;
}

.btn:hover {
  background: #e0f7fa;
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(0, 138, 197, 0.2);
}

.Logo-container {
  margin-bottom: 20px;
}

.Logo-image {
  width: 120px;
  height: auto;
}
.link-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.link-item {
  color: white;
  margin-top: 20px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}
</style>
